<template>
  <div class="template-detail">
    <div class="left-tree">
      <el-tree :data="treeData" 
        v-loading="materialLoading"
        node-key="id" 
        :props="defaultProps">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span v-if="!data.materials">
            <el-button type="text" size="mini" @click="() => append(data)">
              添加
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>
    
    <div class="e-table">
      <el-table :data="tableData" v-loading="loading" border>
        <el-table-column label="序号"
          width="60"
          align="center">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="材料名称"
          prop="material.name">
        </el-table-column>
        <el-table-column label="数量"
          prop="quantity">
        </el-table-column>
        <el-table-column label="规格"
          prop="material.units">
        </el-table-column>
        <el-table-column label="操作"
          width="100"
          align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="toDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <e-page :total="tableTotal" @handleCurrentChange="handleCurrentChange"></e-page>
    </div>
    <material-dialog @insertTemplateMaterialSuccess="insertTemplateMaterialSuccess" ref="materialDialog"></material-dialog>
  </div>
</template>

<script>
import ePage from '@/components/pagination';
import materialDialog from './material-dialog';
import {findTemplateMaterial, getMaterial, deleteTemplateMaterial} from '@/utils/api';
import '@/styles/template/detail.scss';
export default {
  components: {ePage, materialDialog},
  data () {
    return {
      templateSpaceId: this.$route.params.templateSpaceId,
      templateId: this.$route.params.templateId,
      tableData: [],
      tableTotal: 0,
      page: {
        pageIndex: 0,
        pageSize: 10
      },
      treeData: [],
      defaultProps: { // 配置选项
        children: 'materials',
        label: 'name'
      },
      materialLoading: false,
      loading: false
    }
  },
  created () {
    this.getList();
    this.getTree();
  },
  methods: {
    getTree () {
      this.materialLoading = true;
      getMaterial().then((res) => {
        this.materialLoading = false;
        this.treeData = res;
      }).catch((err) => {
        this.materialLoading = false;
      })
    },
    handleCurrentChange (val) {
      this.page.pageIndex = val - 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      const params = Object.assign({}, this.page, {templateSpaceId: this.templateSpaceId})
      findTemplateMaterial(params).then((res) => {
        this.loading = false;
        this.tableData = res.content;
        this.tableTotal = res.totalElements;
      }).catch((err) => {
        this.loading = false;
      })
    },
    append(data) {
      this.$refs.materialDialog.openDialog(data, this.templateId, this.templateSpaceId);
    },
    insertTemplateMaterialSuccess () {
      this.getList()
    },
    toDel (id) {
      this.$confirm('确定要删除该材料吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTemplateMaterial({id: id}).then((res) => {
          if (res) {
            this.$message.success('删除成功');
            this.getList()
          }
        })
      }).catch(() => {      
      });
    }
  }
}
</script>